<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<style>
    div {
        width: 100px;
        height: 100px;
    }

    .container1 {
        height: 200px;
    }

    .container2 {
        height: 200px;
    }

    .container3 {
        height: 200px;
    }

    .container1 .box1 {
        background: red;
        display: block;
    }

    .container1 .box2 {
        background: blue;
        display: none;
    }

    .container1 .box3 {
        background: yellow;
        display: none;
    }

    .container2 .box1 {
        background: red;
        display: block;
    }

    .container2 .box2 {
        background: blue;
        display: none;
    }

    .container2 .box3 {
        background: yellow;
        display: none;
    }

    .container3 .box1 {
        background: red;
        display: block;
    }

    .container3 .box2 {
        background: blue;
        display: none;
    }

    .container3 .box3 {
        background: yellow;
        display: none;
    }
</style>
</head>

<body>
<div class="container1">
    <button>按钮一</button>
    <button>按钮二</button>
    <button>按钮三</button>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>

<div class="container2">
    <button>按钮一</button>
    <button>按钮二</button>
    <button>按钮三</button>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>
<button class="next">点击我切换第二个选线卡下一页</button>

<div class="container3">
    <button>按钮一</button>
    <button>按钮二</button>
    <button>按钮三</button>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>
    <script>
        function Tab(btns,divs) {
            this.btns = btns;
            this.divs = divs;
            let that = this;
            this.btns.forEach((item, key) => {
                item.onclick = function() {
                    that.forDiv(key);
                }
            })
        }
        Tab.prototype.forDiv = function(key) {
            this.divs.forEach((div, k) => {
                if(key === k) {
                    div.style.display = "block";
                } else {
                    div.style.display = "none";
                }
            })
        }

        let btns = document.querySelectorAll(".container1 button");
        let divs = document.querySelectorAll("container1 div");
        new Tab(btns, divs);

        let btn2s = document.querySelectorAll(".container2 button");
        let div2s = document.querySelectorAll(".container2 div");
        let tab2 =  new Tab(btn2s, div2s);
        let nextBtn = document.querySelector(".next");
        let tabKey = 0;
        nextBtn.onclick = function(){
            tabKey++;
            if(tabKey>2){
                tabKey = 0;
            }
            tab2.forDiv(tabKey);
        }





        let btn3s = document.querySelectorAll(".container3 button");
        let div3s = document.querySelectorAll(".container3 div");
       let tab3 = new  Tab(btn3s, div3s);
       let num = 0;
       setInterval(()=>{
            num++;
            if(num>2){
                num=0;
            }
            tab3.forDiv(num);
       },1)



    </script>
</body>
</html>